<template>
    <el-container>
        <el-header>
            <h3>我的现金账户</h3>
        </el-header>

        <el-main>
          <h2 style="margin-left: 80px;font-size: 24px;font-weight: 400;color: #616161;" id="title">
            <el-button id="outsiderButton" @click="dialog.visible=true">米币充值</el-button>
            <br>
            <span>
                   账户余额 &nbsp; <input type="text" :value="money" readonly="readonly">
               </span>
          </h2>
          <div id="div1">
              <ul>
                  <li>
                      <img src="https://s1.mi.com/zt/2013/my/cash-welcome-safe.png" alt="" width="62" height="62">
                      <p>采用顶级数据加密方案，保障现金账户、出入账记录的绝对安全，您可放心使用。</p>
                  </li>
                  <li>
                      <img src="https://s1.mi.com/zt/2013/my/cash-welcome-fast.png" alt="" width="62" height="62">
                      <p>退款、快递补偿等服务可在通过审核后立即到账您的现金账户，免去等待。（目前仅支持快递补偿的入账服务）</p>
                  </li>
                  <li>
                      <img src="https://s1.mi.com/zt/2013/my/cash-welcome-easy.png" alt="" width="62" height="62">
                      <p>现金账户中记录您每一笔入账和支出，方便查找和管理日常交易。</p>
                  </li>
              </ul>
          </div>
        </el-main>

      <!--充值弹窗-->
      <el-dialog
          title="米币充值"
          :visible.sync="dialog.visible"
          width="30%"
          center>
        <span>请选择或输入充值金额:</span>
        <br>
        <div style="padding: 20px;width: 100%">
          <el-button v-for="(value,index) in chargeChoice" :key="index" @click="dialog.amount = value">
            {{ value }}
          </el-button>
        </div>
        <el-input v-model="dialog.amount" clearable placeholder="输入充值金额"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancellCharge">取 消</el-button>
          <el-button type="primary" @click="submitCharge">充 值</el-button>
        </span>
      </el-dialog>

    </el-container>


</template>

<script>
import { charge,getRestMoney } from "@/api/user"

export default {

  name: "Wallet",
  data(){
      return{
        money : undefined,
        chargeChoice: [100,500,1000,10000],
        dialog: {
          visible: false,
          amount: "",
        }
      }
  },
  created() {
    this.getWallet()
  },
  methods: {
      // 获取钱包余额
      getWallet() {
        getRestMoney().then((response) => {
          this.money = response.restMoney
        })
      },
      // 充值提交按钮
      submitCharge() {
        let reg = /^[0-9]*$/
        if (reg.test(this.dialog.amount)) {
          charge(this.dialog.amount).then((response) => {
            alert(response.message)
            this.dialog.visible = false;
            this.dialog.amount = ""
          })
        } else {
          alert("输入金额只能为数字！！！")
        }
      },
      cancellCharge() {
        this.dialog.visible = false;
        this.dialog.amount = ""
      }
  },
}
</script>

<style scoped>
    #outsiderButton {
      background-color: orange;
      border: none;
    }

    #outsiderButton:hover {
      background-color: orange;
      color: black;
    }

    li {
        list-style: none;
    }

    h3{
        margin: 0;
        font-size: 30px;
        font-weight: 400;
        line-height: 68px;
        color: #757575;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    li p{
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    #div1 ul li {
        float: left;
        width: 204px;
        padding: 50px 40px 0px 40px;
    }
</style>
